<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="/mks/css/index.css" />
    <link rel="stylesheet" href="/mks/swiper-bundle.min.css" />
    <script src="/mks/jquery-3.7.1.min.js"></script>
    <script src="/mks/swiper-bundle.min.js"></script>
</head>
<body>

<!-- 轮播图部分 -->
<div class="swiper">
    <div class="swiper-wrapper">
        {foreach name="banner" item="b"}
        <div class="swiper-slide"><img src="{$b.image}" alt="" /></div>
        {/foreach}
    </div>
    <div class="swiper-pagination"></div>
</div>
<!-- 顶部导航 -->
<div class="marx-nav">
    <img src="/mks/img/2.png" alt="" class="marx-nav-img1" />
    <ul>
        {foreach name="nav" item="v"}
        <li><a href="{$v.url}" class="a">{$v.title}</a></li>
        {/foreach}
    </ul>
    <div class="input">
        <img src="/mks/img/14.png" alt="" />
        <input type="text" placeholder="请输入关键词搜索" />
    </div>
</div>
<!-- 新闻公告 -->
<div class="news">
    <div class="news_top">
        <p>XIN WEN GONG GAO</p>
        <p>新闻公告</p>
    </div>
    <!-- 中间 -->
    <div class="news_content1">
        {foreach name="notice1" item="n"}
        <div class="new-con">
            <div class="new-con-left">
                <img src="{$n.image}" alt="" class="news_content1_img" />
                <p></p>
            </div>
            <div class="new-con-right">
                <div class="new-title">
                    <p><a href="{:url('index/detail',['id' => $n['id']])}">{$n.title}</a></p>
                </div>
                <div class="new-center">
                    <div class="line"></div>
                    <div class="time">{$n.createtime|date="Y-m-d",###}</div>
                </div>
                <div class="new-text">
                    <p>{$n.abstract}</p>
                </div>
                <div class="new-bottom">
                    <img src="/mks/img/36.png" alt="" class="new-img-left">
                    <img src="/mks/img/25.png" alt="" class="new-img-right">
                    <div class="pages">
                        <span class="page">1</span>/3
                    </div>
                </div>
            </div>
        </div>
        {/foreach}
        <script>
            $('.new-con:first').show().siblings('.new-con').hide()
            var index = 0
            $('.new-img-right').click(() => {
                index++;
                if (index < 3) {
                    $('.new-con').eq(index).show().siblings('.new-con').hide()
                    $('.page').text(index+1)
                } else {
                    index = -1;
                }
            })
            $('.new-img-left').click(() => {
                index--;
                if (index >= 0) {
                    $('.new-con').eq(index).show().siblings('.new-con').hide()
                    $('.page').text(index+1)
                } else {
                    index = 3;
                }
            })
        </script>
    </div>
</div>
<!-- 下面 -->
<div class="news_content2">
    <p class="news_content2_p"></p>
    <div class="news_content2_div">
        {foreach name="notice2" item="n"}
        <div>
            <p><a href="{:url('index/detail',['id' => $n['id']])}">{$n.title}</a></p>
            <p>{$n.abstract}</p>
            <p>{$n.createtime|date="Y-m-d",###}</p>
        </div>
        {/foreach}
    </div>
</div>
<!-- 查看更多 -->
<div class="news_content2_ck">
    <span><a href="" class="aa">查看更多</a></span>
    <img src="/mks/img/25.png" alt="" />
</div>

</div>
<!-- 党建引领 -->
<div class="leading">
    <div class="news_top">
        <p>DANG JIAN YIN LING</p>
        <p>党建引领</p>
    </div>
    <!-- 内容 -->
    <div class="leading_content">
        {foreach name="lead" item="l"}
        <div class="leading_content1">
            <img src="{$l.image}" alt="" />
            <div class="leading_content1_div">
                <div>
                    <p>{$l.createtime|date="d",###}</p>
                    <p>{$l.createtime|date="Y-m",###}</p>
                </div>
                <div>{$l.abstract}</div>
            </div>
            <div class="show">

            </div>
            <div class="hidden">

            </div>
        </div>
        {/foreach}
    </div>
    <!-- 查看更多 -->
    <div class="news_content2_ck">
        <span><a href="" class="aa">查看更多</a></span>
        <img src="/mks/img/25.png" alt="" />
    </div>
</div>
<!-- 教研动态 -->
<div class="teaching">
    <div class="news_top">
        <p>JIAO YAN DONG TAI</p>
        <p>教研动态</p>
    </div>
    <!-- 内容 -->、
    <div class="teaching_content">
        <div class="teaching_content1" >
            <img src="{$trends.image}" alt="" />
            <div>
                {$trends.title}
            </div>
        </div>
        <div class="teaching_content2">
            <ul>
                {foreach name="trends2" item="t"}
                <li>{$t.title}<span>{$t.createtime|date="Y-m-d",###}</span></li>
                {/foreach}
            </ul>
        </div>
    </div>
    <div class="news_content2_ck">
        <span><a href="" class="aa">查看更多</a></span>
        <img src="/mks/img/25.png" alt="" />
    </div>
</div>
<!-- 社会服务 -->
<div class="society">
    <div class="news_top">
        <p>SHE HUI FU WU</p>
        <p>社会服务</p>
    </div>
    <div class="society_content">
        <div class="society_content1">
            <img src="{$shfw.image}" alt="" />
            <div>
                <p>{$shfw.title}</p>
                <p>
                    {$shfw.abstract}
                </p>
                <p>
                    <img src="/mks/img/11.png" alt="" />
                    <span>{$shfw.createtime|date="Y-m-d",###}</span>
                </p>
            </div>
        </div>
        <div class="society_content2">
            <div>
                <img src="/mks/img/8.png" alt="" />
                红馆
            </div>
            <div>
                <img src="/mks/img/9.png" alt="" />
                心理健康中心
            </div>
        </div>
    </div>
    <div class="news_content2_ck">
        <span><a href="" class="aa">查看更多</a></span>
        <img src="/mks/img/25.png" alt="" />
    </div>
</div>
<!-- 主题活动 -->
<div class="theme">
    <div class="news_top">
        <p>ZHU TI HUO DONG</p>
        <p>主题活动</p>
    </div>
    <div class="theme_content">
        {foreach name="theme" item="t"}
        <div class="theme-card1">
            <div class="theme-top">
                <p class="theme-title1">{$t.title}</p>
                <p class="theme-title2">山东城院“五心工程”温暖校园</p>
            </div>
            <div class="theme-bottom">
                <p class="theme-text1">{$t.abstract}</p>
                <p class="theme-text2">3月24日，一场别开生面的“<br />平台通过网络直播的形式拉<br />开帷幕..</p>
            </div>
        </div>
        {/foreach}
    </div>
    <div class="news_content2_ck">
        <span><a href="" class="aa">查看更多</a></span>
        <img src="/mks/img/25.png" alt="" />
    </div>
</div>
<!-- 马院风采 -->
<div class="mapin">
    <div class="news_top">
        <p>MA YUAN FENG CAI</p>
        <p>马院风采</p>
    </div>
    <div class="mapin_content">
        <div class="scroll-container">
            {foreach name="myfc" item="m"}
            <div class="scroll-content">
                <img src="{$m.image}" />
            </div>
            {/foreach}
        </div>
    </div>
</div>
<!-- 友情链接 -->
<div class="frendly">
    <ul>
        <li>友情链接：</li>
        {foreach name="yqlj" item="y"}
        <li><a href="{$y.url}" class="frendly_a">{$y.name}</a></li>
        {/foreach}

    </ul>
</div>
<!-- 最后 -->
<div class="index_bottom">
    <div class="index_bottom_content">
        <img src="/mks/img/2.png" alt="" />
        <!-- <div></div> -->
        <p class="index_bottom_content_p1">地址：山东烟台市高新区海天路1001号</p>
        <p class="index_bottom_content_p2">办公室电话：0535-293876</p>
        <img src="/mks/img/26.png" alt="" class="index_bottom_content_img2" />
    </div>
    <div class="index_bottom_abs">
        Copyright O山东省城市服务技师学院版权所有
    </div>
</div>
<!-- 逻辑部分 -->
<script>
    var mySwiper = new Swiper('.swiper', {
        autoplay: {
            delay: 1000, //1秒切换一次
        },
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        // navigation: {
        //   nextEl: '.swiper-button-next',
        //   prevEl: '.swiper-button-prev',
        // },

    })
</script>

</body>
</html>